import { createApp } from 'vue'
import Message from './Message.vue'
export type MessageType = 'success' | 'error' | 'default'

const createMessage = (message: string, type: MessageType, timeout = 1000) => { 
  const messageInstance = createApp(Message, {  //返回一个应用实例，第二个参数是Message组件中props接收的参数
    message,
    type
  })
  const mountNode = document.createElement('div')
  document.body.appendChild(mountNode)
  messageInstance.mount(mountNode)  //将message组件挂载到mountNode上，但是因为message组件中有teleport，所以最终挂载到了id为message的div里
  setTimeout(() => {    //1秒后从结点卸载组件，并且从网页中删除新创建的结点
    messageInstance.unmount() //在提供的 DOM 元素上卸载应用实例的根组件,也就是说把messageInstance应用实例从mountNode上删除
    document.body.removeChild(mountNode)
  }, timeout)
}

export default createMessage
